<template>
  <div class="coupon-panel" v-if="config" @click.stop>
    <div class="top" v-if="couponInfo">
      <div class="title">
        <div class="left">
          <i></i>
          <span>
            {{getShopName(couponInfo.shop_id)}}
            <b>|</b>
            {{ parseInt(couponInfo.type) === 1 ? '全场通用' : couponInfo.brand_name }}
          </span>
        </div>
        <div class="right" v-if="showShare" @click="$emit('shareClick', couponInfo)">
          <i></i>
        </div>
      </div>
      <div class="middle-wrapper" @click="panelInnerClick">
        <div class="price">
          ¥
          <span>{{couponInfo.discount_money}}</span>
        </div>
        <div
          class="desc"
        >使用条件：凭借此券，在{{getShopName(couponInfo.shop_id)}}，消费满{{couponInfo.discount_limit}}元即可使用</div>
        <div class="time">
          <div class="left">
            <i></i>
            <span>{{ couponInfo.start_at ? couponInfo.start_at.split(' ')[0] : ''}}～{{couponInfo.end_at ? couponInfo.end_at.split(' ')[0] : ''}}</span>
          </div>
          <div class="right" v-if="showCount">
            <i></i>
            <span>{{ couponInfo.count }} 张</span>
          </div>
        </div>
      </div>
    </div>
    <div class="top" v-if="coupon && $route.query.coupon">
      <div class="title">
        <div class="left">
          <i></i>
          <span>
            {{getShopName(coupon.shop_id)}}
            <b>|</b>
            {{ parseInt(coupon.type) === 1 ? '全场通用' : coupon.brand_name }}
          </span>
        </div>
        <div class="right" v-if="showShare" @click="$emit('shareClick', coupon)">
          <i></i>
        </div>
      </div>
      <div class="middle-wrapper" @click="panelInnerClick">
        <div class="price">
          ¥
          <span>{{coupon.discount_money}}</span>
        </div>
        <div
          class="desc"
        >使用条件：凭借此券，在{{getShopName(coupon.shop_id)}}，消费满{{coupon.discount_limit}}元即可使用</div>
        <div class="time">
          <div class="left">
            <i></i>
            <span>{{ coupon.start_at ? coupon.start_at.split(' ')[0] : ''}}～{{coupon.end_at ? coupon.end_at.split(' ')[0] : ''}}</span>
          </div>
          <div class="right" v-if="showCount">
            <i></i>
            <span>{{ coupon.count }} 张</span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="bottom"
      @click="useCouponClick"
      v-if="couponInfo"
    >{{couponInfo.count > 0 && !hasExpired(couponInfo) ? title : (couponInfo.count > 0 && hasExpired(couponInfo)) ? '已过期' : (!(couponInfo.count > 0) && !couponInfo.is_have_get) ? '已使用' : '已领取'}}</div>
    <div
      class="status"
      v-if="couponInfo && couponInfo.status && this.$store.getters.userInfo &&  !this.$store.getters.userInfo.identity_type"
    >
      <img src="@/assets/images/已使用.png" alt />
    </div>
    <div
      class="status"
      v-if="couponInfo && !couponInfo.status && hasExpired(couponInfo) && $store.getters.userInfo && !$store.getters.userInfo.identity_type "
    >
      <img src="@/assets/images/已过期.png" alt />
    </div>
  </div>
</template>
<script>
import ConfigShops from '@/views/my/mixins/config-list'

export default {
  props: {
    showShare: {
      type: Boolean,
      default: true
    },
    showCount: {
      type: Boolean,
      default: true
    },
    couponInfo: {
      type: Object,
      default: () => null
    },
    title: {
      type: String,
      default: '立即使用'
    }
  },
  mixins: [ConfigShops],
  data () {
    return {
      coupon: null
    }
  },
  created () {
    if (this.$route.query.coupon) {
      this.coupon = JSON.parse(this.$route.query.coupon)
    }
  },
  methods: {
    hasExpired (couponInfo) {
      const endTime = new Date(couponInfo.end_at.replace(/-/g, '/')).getTime()
      const nowTime = new Date().getTime()
      if (endTime < nowTime) {
        return true
      } else {
        return false
      }
    },
    panelInnerClick () {
      const userInfo = JSON.parse(localStorage.getItem('USER'))
      console.log(JSON.parse(localStorage.getItem('USER')))
      if (userInfo.identity_type) {
        const _coupon = this.couponInfo ? this.couponInfo : this.coupon
        const getTime = new Date(
          _coupon.created_at.replace(/-/g, '/')
        ).getTime()
        const designerTime = new Date(
          userInfo.created_at.replace(/-/g, '/')
        ).getTime()
        if (getTime < designerTime && !_coupon.type === 1) {
        } else {
          this.$emit('useCouponDetail')
        }
        // if (_coupon.type === 1) {
        //   this.$emit('useCouponDetail')
        // }
      }
    },
    useCouponClick () {
      if (this.$route.path === '/my/coupon/coupon-detail') {
        if (this.coupon.count > 0) {
          this.$router.replace({
            path: '/my/coupon/use-coupon',
            query: {
              brand_name:
                parseInt(this.coupon.type) === 1
                  ? encodeURIComponent('全场通用')
                  : this.coupon.brand_name,
              shop_id: this.coupon.shop_id,
              verify_code: encodeURIComponent(this.coupon.verify_code),
              discount_limit: this.coupon.discount_limit,
              start_at: this.coupon.start_at,
              end_at: this.coupon.end_at,
              discount_money: this.coupon.discount_money
            }
          })
        } else {
          this.$toast('优惠券数量不够，暂不能使用~')
        }
      } else {
        this.$emit('useCoupon')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.coupon-panel {
  width: 6.6rem;
  // height: 4.36rem;
  background: url("../../../assets/images/bg_q1.png") no-repeat;
  background-size: cover;
  position: relative;
  .top {
    width: 100%;
    padding: 0.3rem 0.36rem;
    box-sizing: border-box;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0;
      .left {
        width: 93%;
        white-space: nowrap;
        overflow: hidden;
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 0.72rem;
          height: 0.23rem;
          background: url("../../../assets/images/icon_logo .png") no-repeat;
          background-size: cover;
          margin-right: 0.1rem;
          vertical-align: baseline;
        }
        span {
          flex: 1;
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(4, 0, 0, 1);
          line-height: 0.26rem;
          @include ellipsis();
          b {
            padding: 0 0.1rem;
          }
        }
      }
      .right {
        padding: 0 0 0 0.2rem;
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 0.29rem;
          height: 0.28rem;
          background: url("../../../assets/images/icon_fx .png") no-repeat;
          background-size: cover;
        }
      }
    }
    .middle-wrapper {
      .price {
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(4, 0, 0, 1);
        margin-top: 0.35rem;
        span {
          font-size: 0.6rem;
          font-family: Abel;
          font-weight: bold;
          color: rgba(4, 0, 0, 1);
        }
      }
      .desc {
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 0.32rem;
        width: 5.08rem;
        margin-top: 0.26rem;
      }
      .time {
        display: flex;
        align-items: center;
        margin-top: 0.38rem;
        .left,
        .right {
          font-size: 0;
          display: flex;
          align-items: center;
          i {
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            background: url("../../../assets/images/icon_time.png") no-repeat;
            background-size: cover;
            margin-right: 0.24rem;
          }
          span {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(4, 0, 0, 1);
          }
        }
        .right {
          margin-left: 0.83rem;
          i {
            display: inline-block;
            width: 0.32rem;
            height: 0.28rem;
            background: url("../../../assets/images/jia.png") no-repeat;
            background-size: cover;
          }
        }
      }
    }
  }
  .bottom {
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 4, 0, 1);
    text-align: center;
    line-height: 0.93rem;
  }
  .status {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.6;

    img {
      width: 2rem;
      height: 2rem;
      @include center();
    }
  }
}
</style>
